<!-- 公司列表 -->
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { object } from 'vue-types'

interface Column {
  title: string
  dataIndex: string
}
interface FormState {
  id: number
  companyName: string
  companyAddress: string
  companyLaravel: number
}

const columns: Array<Column> = [
  {
    title: '编号',
    dataIndex: 'id',
  },
  {
    title: '公司名称',
    dataIndex: 'companyName',
  },
  {
    title: '公司地址',
    dataIndex: 'companyAddress',
  },
  {
    title: '公司等级',
    dataIndex: 'companyLaravel',
  },
  {
    title: '操作',
    dataIndex: 'options',
  },
]

let listData = ref([
  {
    id: 1,
    companyName: '公司1',
    companyAddress: '222222222',
    companyLaravel: 2,
  },
] as FormState[])
const visible = ref<boolean>(false)
let formData = ref<FormState>({
  id: 0,
  companyName: '',
  companyAddress: '',
  companyLaravel: 0,
})

/**
 * 钩子函数
 */
onMounted(() => {
  testJS()
})

function testJS() {
  let message = null
  let age //未赋值，为undefined
  if (message) {
    console.log('message')
  }
  if (!message) {
    console.log('!message')
  }
  if (age) {
    console.log('age')
  }
  if (!age) {
    console.log('!age')
  }
}

/**
 * 组件内部方法
 */
function addCompany() {
  visible.value = true
  formData.value = {
    id: 0,
    companyName: '',
    companyAddress: '',
    companyLaravel: 0,
  }
}
//保存公司信息
function handleOk() {
  visible.value = false
  if (formData.value.id == 0) {
    //添加
    formData.value.id = listData.value.length + 1
    listData.value = [...listData.value, { ...formData.value }]
  } else {
    //编辑
  }
}
function editCompany(record: any) {
  let data = record
  formData.value = record
  visible.value = true
}
</script>

<template>
  <!-- 按钮 -->
  <div class="btn-box">
    <a-button type="primary" @click="addCompany">
      <template #icon><plus-outlined /></template>
      添加公司
    </a-button>
  </div>
  <!-- 列表 -->
  <div>
    <a-table :columns="columns" :data-source="listData">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex == 'options'">
          <a-button class="columns-btn">
            <template #icon>
              <edit-outlined @click="editCompany(record)"></edit-outlined>
            </template>
          </a-button>
          <a-button>
            <template #icon>
              <delete-outlined></delete-outlined>
            </template>
          </a-button>
        </template>
      </template>
    </a-table>
  </div>
  <!-- modal弹窗 -->
  <a-modal v-model:visible="visible" title="添加公司" @ok="handleOk">
    <a-form
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      :model="formData"
    >
      <a-form-item label="公司名称" name="companyName">
        <a-input type="text" v-model:value="formData.companyName"></a-input>
      </a-form-item>
      <a-form-item label="公司地址" name="companyAddress">
        <a-input type="text" v-model:value="formData.companyAddress"></a-input>
      </a-form-item>
      <a-form-item label="公司等级" name="companyLaravel">
        <a-input-number
          v-model:value="formData.companyLaravel"
          :min="1"
          :max="10"
        ></a-input-number>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<style lang="scss" scoped>
.btn-box {
  padding-bottom: 12px;
}
.columns-btn {
  margin-right: 10px;
}
</style>
